<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../JS/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
	</head>
	<body>
		<div id="app" style="width: 400px; margin: 50px auto;">
			<table class="table table-bordered table-striped">
				<button type="button" class="btn btn-xs btn-primary" @click="add()">添加</button>
				<hr >
				<tr><th>序号</th><th>编号</th><th>名字</th><th>年龄</th><th>操作</th></tr>
				<tr v-for="(item,i) in list" :key="item.sid">
					<td>{{ i+1 }}</td>
					<td>{{ item.sid }}</td>
					<td>{{ item.sname }}</td>
					<td>{{ item.age }}</td>
					<td>
						<button type="button" class="btn btn-xs btn-info" @click="show(item)">查看</button>
						<button type="button" class="btn btn-xs btn-danger" @click="del(item.sid)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					list:[
						{sid:1001,sname:'张三1',age:20},
						{sid:1002,sname:'张三2',age:21},
						{sid:1003,sname:'张三3',age:22},
						{sid:1004,sname:'张三4',age:23},
					]
				},
					
				methods:{
					show:function(item){
						alert(item.sid+"  "+item.sname)
					},
					del:function(sid){
						this.list.forEach((item,i)=>{
							if(sid==item.sid){
								this.list.splice(i,1)
								return false
							}
						})
					},
					add:function(){
						let sid = prompt("请输入学号")
						let sname = prompt("请输入名字")
						let age = prompt("请输入年龄")
						this.list.push({sid,sname,age})
					}
				}
				
			})
		</script>
	</body>
</html>
